<template>
  <el-dialog
    v-model="visible"
    title="采购订单详情"
    width="900px"
    :before-close="handleClose"
    class="purchase-order-detail-dialog"
    :modal-append-to-body="false"
  >
    <div class="purchase-order-detail" v-if="order">
      <el-tabs v-model="activeTab" class="detail-tabs">
        <el-tab-pane label="基本信息" name="basic">
          <el-descriptions :column="2" border class="detail-descriptions">
            <el-descriptions-item label="订单号" :span="2">
              {{ order.orderNumber }}
            </el-descriptions-item>
            <el-descriptions-item label="供应商">
              {{ order.supplierName }}
            </el-descriptions-item>
            <el-descriptions-item label="订单金额">
              ¥{{ order.totalAmount.toLocaleString() }}
            </el-descriptions-item>
            <el-descriptions-item label="下单日期">
              {{ order.orderDate }}
            </el-descriptions-item>
            <el-descriptions-item label="预计到货日期">
              {{ order.expectedDeliveryDate }}
            </el-descriptions-item>
            <el-descriptions-item label="采购员">
              {{ order.purchaser }}
            </el-descriptions-item>
            <el-descriptions-item label="状态">
              <el-tag :type="getStatusType(order.status)" class="status-tag">
                {{ getStatusText(order.status) }}
              </el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="备注" :span="2">
              {{ order.remark || '-' }}
            </el-descriptions-item>
          </el-descriptions>
        </el-tab-pane>
        
        <el-tab-pane label="订单明细" name="items">
          <el-table :data="order.items" class="order-items-table">
            <el-table-column prop="productName" label="商品名称" />
            <el-table-column prop="specification" label="规格" />
            <el-table-column prop="quantity" label="数量" />
            <el-table-column prop="unit" label="单位" />
            <el-table-column prop="unitPrice" label="单价">
              <template #default="scope">
                ¥{{ scope.row.unitPrice.toFixed(2) }}
              </template>
            </el-table-column>
            <el-table-column prop="amount" label="金额">
              <template #default="scope">
                ¥{{ (scope.row.quantity * scope.row.unitPrice).toFixed(2) }}
              </template>
            </el-table-column>
            <el-table-column prop="remark" label="备注" />
          </el-table>
        </el-tab-pane>
        
        <el-tab-pane label="审批记录" name="approval">
          <el-table :data="approvalRecords" class="approval-table">
            <el-table-column prop="approver" label="审批人" />
            <el-table-column prop="approveTime" label="审批时间" />
            <el-table-column prop="action" label="操作">
              <template #default="scope">
                <el-tag :type="getApprovalActionType(scope.row.action)" class="approval-tag">
                  {{ getApprovalActionText(scope.row.action) }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="remark" label="备注" />
          </el-table>
        </el-tab-pane>
        
        <el-tab-pane label="物流动态" name="logistics">
          <el-timeline class="logistics-timeline">
            <el-timeline-item
              v-for="activity in logisticsActivities"
              :key="activity.id"
              :timestamp="activity.timestamp"
              :type="activity.type"
            >
              {{ activity.content }}
              <div class="activity-operator">操作人: {{ activity.operator }}</div>
            </el-timeline-item>
          </el-timeline>
        </el-tab-pane>
        
        <el-tab-pane label="相关文件" name="files">
          <el-table :data="relatedFiles" class="files-table">
            <el-table-column prop="fileName" label="文件名" />
            <el-table-column prop="fileType" label="类型" />
            <el-table-column prop="uploadTime" label="上传时间" />
            <el-table-column prop="uploader" label="上传人" />
            <el-table-column label="操作">
              <template #default="scope">
                <el-button 
                  size="small" 
                  @click="previewFile(scope.row)"
                  class="file-action-btn"
                >
                  预览
                </el-button>
                <el-button 
                  size="small" 
                  @click="downloadFile(scope.row)"
                  class="file-action-btn"
                >
                  下载
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>
    </div>
    
    <template #footer>
      <el-button @click="handleClose" class="close-btn">关闭</el-button>
      <el-button 
        type="primary" 
        @click="printOrder" 
        :icon="Printer"
        v-if="order && order.status !== 'cancelled'"
        class="print-btn"
      >
        打印订单
      </el-button>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, computed, defineProps, defineEmits } from 'vue'
import { ElMessage } from 'element-plus'
import { Printer } from '@element-plus/icons-vue'

interface PurchaseOrderItem {
  id: number
  productName: string
  specification: string
  quantity: number
  unit: string
  unitPrice: number
  amount: number
  remark: string
}

interface PurchaseOrder {
  id: number
  orderNumber: string
  supplierId: number
  supplierName: string
  purchaser: string
  orderDate: string
  expectedDeliveryDate: string
  totalAmount: number
  status: string
  remark: string
  createTime: string
  items: PurchaseOrderItem[]
}

interface ApprovalRecord {
  id: number
  approver: string
  approveTime: string
  action: string
  remark: string
}

interface LogisticsActivity {
  id: number
  timestamp: string
  content: string
  type: string
  operator: string
}

interface RelatedFile {
  id: number
  fileName: string
  fileType: string
  uploadTime: string
  uploader: string
  url: string
}

const props = defineProps<{
  modelValue: boolean
  order: PurchaseOrder | null
}>()

const emit = defineEmits<{
  (e: 'update:modelValue', value: boolean): void
  (e: 'close'): void
}>()

const visible = computed({
  get: () => props.modelValue,
  set: (value) => emit('update:modelValue', value)
})

const activeTab = ref('basic')

const approvalRecords = ref<ApprovalRecord[]>([
  {
    id: 1,
    approver: '采购经理',
    approveTime: '2023-01-01 10:00:00',
    action: 'approve',
    remark: '同意采购'
  }
])

const logisticsActivities = ref<LogisticsActivity[]>([
  {
    id: 1,
    timestamp: '2023-01-01 09:00:00',
    content: '订单已创建',
    type: 'primary',
    operator: '张三'
  },
  {
    id: 2,
    timestamp: '2023-01-01 10:00:00',
    content: '订单已确认',
    type: 'success',
    operator: '李四'
  }
])

const relatedFiles = ref<RelatedFile[]>([
  {
    id: 1,
    fileName: '采购合同.pdf',
    fileType: 'PDF',
    uploadTime: '2023-01-01 09:30:00',
    uploader: '张三',
    url: '/files/contract.pdf'
  }
])

const handleClose = () => {
  visible.value = false
  emit('close')
}

const printOrder = () => {
  ElMessage.success('开始打印采购订单')
}

const downloadFile = (file: RelatedFile) => {
  ElMessage.success(`开始下载文件: ${file.fileName}`)
}

const previewFile = (file: RelatedFile) => {
  ElMessage.success(`预览文件: ${file.fileName}`)
}

const getStatusType = (status: string) => {
  switch (status) {
    case 'pending': return 'info'
    case 'confirmed': return 'warning'
    case 'shipped': return 'primary'
    case 'completed': return 'success'
    case 'cancelled': return 'danger'
    default: return 'info'
  }
}

const getStatusText = (status: string) => {
  switch (status) {
    case 'pending': return '待确认'
    case 'confirmed': return '已确认'
    case 'shipped': return '已发货'
    case 'completed': return '已完成'
    case 'cancelled': return '已取消'
    default: return '未知'
  }
}

const getApprovalActionType = (action: string) => {
  switch (action) {
    case 'approve': return 'success'
    case 'reject': return 'danger'
    case 'submit': return 'primary'
    default: return 'info'
  }
}

const getApprovalActionText = (action: string) => {
  switch (action) {
    case 'approve': return '同意'
    case 'reject': return '拒绝'
    case 'submit': return '提交'
    default: return '未知'
  }
}
</script>

<style scoped>
.purchase-order-detail {
  padding: 20px 0;
}

.el-divider {
  margin: 20px 0;
}

.activity-operator {
  margin-top: 4px;
  font-size: 12px;
  color: #909399;
}

/* 对话框整体样式 */
.purchase-order-detail-dialog {
  transition: all 0.3s ease;
}

:deep(.purchase-order-detail-dialog .el-dialog__body) {
  padding: 20px;
}

:deep(.purchase-order-detail-dialog .el-dialog__header) {
  padding: 20px;
  border-bottom: 1px solid #ebeef5;
}

/* 详情描述列表样式 */
.detail-descriptions {
  transition: all 0.3s ease;
}

.detail-descriptions:hover {
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

/* 标签悬停效果 */
.status-tag,
.approval-tag {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.status-tag:hover,
.approval-tag:hover {
  transform: scale(1.05);
}

/* 表格悬停效果 */
.order-items-table,
.approval-table,
.files-table {
  transition: all 0.3s ease;
}

.order-items-table:hover,
.approval-table:hover,
.files-table:hover {
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

/* 物流动态时间线 */
.logistics-timeline {
  padding-left: 20px;
}

:deep(.logistics-timeline .el-timeline-item__tail) {
  border-left: 2px solid #e4e7ed;
}

:deep(.logistics-timeline .el-timeline-item__node) {
  width: 12px;
  height: 12px;
}

/* 文件操作按钮悬停效果 */
.file-action-btn {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  margin-right: 8px;
}

.file-action-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* 关闭按钮悬停效果 */
.close-btn {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.close-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* 打印按钮悬停效果 */
.print-btn {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.print-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* 响应式设计 */
@media (max-width: 768px) {
  .purchase-order-detail-dialog {
    width: 95% !important;
    margin-top: 20px;
  }
  
  :deep(.detail-descriptions .el-descriptions__body) {
    overflow-x: auto;
  }
  
  :deep(.el-tabs__nav-scroll) {
    overflow-x: auto;
  }
  
  :deep(.el-tabs__nav) {
    white-space: nowrap;
  }
}
</style>